Rendering Elements
React elementsはDOMではなく、プレーンなJSオブジェクト
それに対応するDOMをReactが構築する
React elementsと"components"の違いについては次のセクションで
Rendering an Element into the DOM
Reactアプリケーションを展開するルート要素を決める
その配下にReactがReact elementsをレンダリングする
レンダリング命令はReactDOM.render()
Updating the Rendered Element
React elementsはImmutable
一度作ったReact elementは子要素や属性の変更ができない
UIを更新する唯一の方法はelementを作り直し、ReactDOM.render()を呼ぶこと
code:JavaScript
// 毎秒、描画を更新する例
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>It is {new Date().toLocaleTimeString()}.</h2>
</div>
);
ReactDOM.render(element, document.getElementById('root'));
}
setInterval(tick, 1000);
React Only Updates What’s Necessary
ReactDOM.render()ですべてのelementを呼んでいるけど、差分しか更新しない